<template>

  <!-- 2.排课表.xls -->
  <el-drawer :title="text" :visible.sync="open_1" direction="rtl" size="25%" :show-close="false"
    :wrapperClosable="false">
    <!-- {{queryParamsScheduling}} -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="ml30">
          <div class="grid-content bg-purple-dark    text-size-23-w700  ">排课表.xls</div>
          <div class="grid-content bg-purple     text-size-16 mt20 text-gray  ">请设置报表下载范围</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="classflex-end mt20 mr20">
          <el-button @click="cancel(1)" style="width: 100px; " class="">关闭</el-button>
        </div>
      </el-col>
    </el-row>
    <el-form class=" ml30 mr30" ref="queryParamsScheduling" :model="queryParamsScheduling" :rules="rules"
      label-width="80px" label-position="left">
      <el-divider style="width: 80%;"></el-divider>
      <el-form-item label="关联课程" prop="courseName">


        <el-select style="width: 360px;" v-model="queryParamsScheduling.courseName" placeholder="请选择课程" filterable
          @change="ChangeCourseName">
          <el-option v-for="dict in courseList" :key="dict.id" :label="dict.courseName" :value="dict.courseName">
          </el-option>

        </el-select>
      </el-form-item>
      <el-form-item label="指定班级" prop="className">


        <el-select style="width: 360px;" v-model="queryParamsScheduling.className" placeholder="请选择班级" filterable>
          <el-option v-for="dict in schoolclassList" :key="dict.id" :label="dict.className" :value="dict.className">
          </el-option>

        </el-select>
      </el-form-item>
      <el-form-item label="时间段">
        <el-date-picker v-model="dateRange" style="width: 360px;" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>

      <el-divider></el-divider>
      <div>
        <el-button type="primary" @click="handleScheduingExport" style="width: 100%;">立即下载</el-button>

      </div>
    </el-form>
  </el-drawer>


</template>

<script>
  import {
    listStudent,
    getStudent,
    delStudent,
    addStudent,
    updateStudent
  } from "@/api/student/student";
  import {
    listCourse,
    getCourse,
    delCourse,
    addCourse,
    updateCourse
  } from "@/api/course/course";
  import {
    listSchoolclass,
    getSchoolclass,
    delSchoolclass,
    addSchoolclass,
    updateSchoolclass
  } from "@/api/schoolclass/schoolclass";
  export default {
    name: "DownSchedulingDrawer",
    dicts: ['course_teaching_mode', 'course_state', 'course_subject', 'student_state', "order_state"],
    data() {
      return {
        schoolclassList: [],
dateRange: [],
        text: "",
        open_1: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 课程管理表格数据
        courseList: [],

        // 是否显示弹出层
        open_course: false,
        // 查询参数
        queryParamsScheduling: {},
        queryParamsCourse: {},
        queryParamsSchool: {},
        // 弹出层标题
        title: "",
        // 表单参数
        form: {},
        // 表单校验
        rules: {


        },
        student_state: "",

      };
    },
    created() {
      // this.student_state = "全部学员"
      this.getCourseList();
      // this.getSchoolclassList();

    },
    watch: {
      'student_state': {
        handler() {


          if (this.student_state == "全部学员") {
            this.queryParamsStudent.student_state = null;
          } else {
            this.queryParamsStudent.student_state = this.student_state;
          }
        }
      }

    },
    methods: {
      /** 查询班级列表 */
      getSchoolclassList(classCourse) {
        this.queryParamsSchool.classCourse = classCourse;
        this.queryParamsSchool.deptId = this.$store.state.user.deptId;
        listSchoolclass(this.queryParamsSchool).then(response => {
          this.schoolclassList = response.rows;

        });
      },

      /** 查询课程管理列表 */
      getCourseList() {

        this.queryParamsCourse.deptId = this.$store.state.user.deptId;
        this.queryParamsCourse.courseState = "在开课程";
        listCourse(this.queryParamsCourse).then(response => {
          this.courseList = response.rows;


        });
      },
      ChangeCourseName(classCourse) {
        console.log(classCourse);
        // this.form.className=null
        this.$set(this.form, 'className', null)
        this.getSchoolclassList(classCourse)
      },
      opendownscheduling() {
        this.open_1 = true;
      },
      //导出排课
      handleScheduingExport(){
        this.download('scheduling/scheduling/export', {
          ...this.queryParams
        }, `scheduling_${new Date().getTime()}.xlsx`)

      },

      cancel(e) {
        console.log(e);
        switch (e) {
          case 0:
            this.open_0 = false;
            break;
          case 1:
            this.open_1 = false;
            break;
          case 2:
            this.open_2 = false;
            break;
          case 3:
            this.open_3 = false;
            break;
          case 4:
            this.open_4 = false;
            break;
          case 5:
            this.open_5 = false;
            break;
          case 6:
            this.open_6 = false;
            break;
          case 7:
            this.open_7 = false;
            break;
          case 8:
            this.open_8 = false;
            break;
          case 9:
            this.open_9 = false;
            break;
          case 10:
            this.open_10 = false;
            break;
          case 11:
            this.open_11 = false;
            break;
          default:

        }

      },
    },
  }
</script>
<style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>
